<template>
	<view class="content">
		<view class="bag">
		  <u-swiper height="200" :list="swiperList" indicator indicatorMode="line" imgMode="scaleToFill" radius="15" bgColor="#fafafa"></u-swiper>
		</view>
		<view class="boxouter flexbetween">
			<view class="imageoutrr" @click="gojingqu">
				<image src="../../static/images/hotel/jingqu.png"></image>
				<view class="txt">景区</view>
			</view>
			<view class="imageoutrr" @click="goshangcheng">
				<image src="../../static/images/hotel/shangcheng.png"></image>
				<view class="txt">农产品</view>
			</view>
			<view class="imageoutrr" @click="gojifen">
				<image src="../../static/images/hotel/jifen.png"></image>
				<view class="txt">积分</view>
			</view>
			<view class="imageoutrr" @click="jumpurl('/pages/hotel/gonglue')">
				<image src="../../static/images/hotel/gonglue.png"></image>
				<view class="txt">攻略</view>
			</view>
			<view class="imageoutrr" @click="goyaoqing">
				<image src="../../static/images/hotel/yaoqingg.png"></image>
				<view class="txt">邀请</view>
			</view>
		</view>
		<!-- 所有卡 -->
		<view class="flexbetween flex_wrap">
			<view class="dianxin margin_top" @click="jumpurl('/pages/hotel/tejiafj')">
				<view class="sanshier">特价房间</view>
				<view class="margin_top1 lansetext">限时抢购</view>
			</view>
			<view class="dianxinz margin_top" @click="jumpurl('/pages/hotel/tejiahw')">
				<view class="sanshier">特价好物</view>
				<view class="margin_top1 lansetext">限时抢购</view>
			</view>
		</view>
		<view class="middle">
		   <view class="flexbetween">
					<view class="mhleft flexcenter">
						<view class="address">
							<image class="adressimg" src="../../static/images/hotel/dingwei.png"></image>
							<view class="adresscontent font" style="font-size: 26rpx;">{{city_text}}</view>
						</view>
						<view class="shu">
						</view>
						<view class="sousuo">
							<input type="search" v-model="keyword" placeholder="搜索民宿"  @confirm="init()"/>
						</view>
					</view>
					<view class="mhright flexcenter">
						<view class="location" style="white-space: nowrap;">当前位置</view>
						<image class="locationimg" src="../../static/images/hotel/currentlocation.png"></image>
					</view>
				</view>
				<view class="middle_bottom flexbetween" @click="show = true">
					<view class="mb_left">
						<view class="ruzhu">入住日期</view>
						<view class="riqi">
							<view class="font ri">{{startime}}</view>
							<view class="qi">{{startweek}}</view>
						</view>
					</view>
					<view class="yiwan">{{daynum}}晚</view>
					<view class="mb_right">
						<view class="ruzhu">离住日期</view>
						<view class="riqi">
							<view class="font ri">{{endtime}}</view>
							<view class="qi">{{endweek}}</view>
						</view>
					</view>
				</view>
				<view class="searchbtn" @click="chaxun">查询民宿</view>
			</view>
		<view class="remen">
			<view class="rementitle">
				热门民宿
			</view>
			<view class="flexcenter1" v-if="!list.data.length">
				<view class="placeholderimg" style="margin-top: 300rpx;">
					<image src="../../static/images/bg-icons/placeholderimg.png" mode=""></image>
				</view>
				<view class="zanwushuju">暂无数据~</view>
			</view>
			<view class="jiudianlist">
				<view class="section flexleft" v-for="item in list.data" :key="item.id" @click="godetail(item)">
					<view class="left">
						<image :src="item.logo_text" mode="" class="section_img"></image>
					</view>
					<view class="right">
						<view class="right_ershou yhxiankuan">{{item.name}}</view>
						<view class="section_center">
							<view class="tedian">
								<view class="pingfen">{{item.star}}</view>
								<view class="miaoshu" v-if="item.comment_data">{{item.comment_data.content}}</view>
								<view class="pingnum">{{item.comment_count}}评论</view>
							</view>
							<view class="juli">距您{{item.distance}}km</view>
						</view>
						<scroll-view :show-scrollbar="true" :scroll-x="true" class="telist flexleft">
							<view class="hotelte margin-right1" v-for="ite in item.tags" :key="ite.id">{{ite.name}}
							</view>
						</scroll-view>
						<view class="price">
							￥{{item.minprice}}<text style="font-size: 24rpx;">起</text>
						</view>
					</view>
				</view>
			</view>
		</view>
		<u-calendar color="#00D2E1" startText="入住" endText="离店" :mode="mode" confirmText="确认选择"
			confirmDisabledText="确认选择" :show="show" @confirm="confirm" @close="show = false"></u-calendar>
	</view>
</template>

<script>
	const httpRequest = require("@/common/httpRequest.js")
	const QQMapWX = require('@/common/qqmap-wx-jssdk.min.js');
	// 实例化API核心类
	const qqmapsdk = new QQMapWX({
		key: 'MMFBZ-E43YQ-5GX5K-GR5DT-OAEAK-5XB4N' // 必填
	});
	export default {
		data() {
			return {
				keyword: '',
				show: false,
				mode: 'range',
				lat: "",
				lng: "",
				list: [],
				page: 1,
				limit: 12,
				list: {
					data: []
				},
				fllist:[
					{
						id:1,
						image_text:"@/static/images/hotel/leftimg.png",
						name:"特价酒店",
						description:"限时抢购"
					},
					{
						id:2,
						image_text:"@/static/images/hotel/rightimg.png",
						name:"特价好物",
						description:"限时抢购"
					}
				],
				city_text: "", //当前城市信息
				currentAddress: "", //当前位置
				start:"",//年月日
				end:"",//年月日
				startime: "", //开始时间
				endtime: "", //结束时间
				startweek: "", //开始周
				endweek: "", //结束周
				daynum: 1,
				shop_id:0,
				swiperList: [], // 轮播图
				userinfo:{},//用戶信息
				info:false,
				isgoyaoqing:false,// 是否可以跳转 邀请
			};
		},
		onLoad(optios) {
			this.dateinit()
			this.getPic()
			if(this.info==true){
				this.getinfo()
			}
			let _this = this
			let scene = decodeURIComponent(optios.scene);
			_this.referee_id = optios.referee_id ? optios.referee_id : (scene ? scene : 0);
			if (_this.referee_id !== 0) {
				uni.setStorageSync('referee_id', _this.referee_id);
				httpRequest.bindGx();
			}
			// #ifdef MP-WEIXIN
			const url = decodeURIComponent(optios.q) // 获取到二维码原始链接内容
			if (url.indexOf("?") != -1) {
				var str = url.substr(url.indexOf("?") + 1);
				var strs = str.split("&");
				let theRequest = {};
				for (var i = 0; i < strs.length; i++) {
					theRequest[strs[i].split("=")[0]] = (strs[i].split("=")[1]);
				}
				_this.referee_id = optios.referee_id ? optios.referee_id : (theRequest.referee_id ? theRequest.referee_id :
					0);
				if (_this.referee_id != 0) {
					uni.setStorageSync('referee_id', _this.referee_id);
					httpRequest.bindGx();
				}
				
			}
			// #endif
		},
		onShow() {
		 this.getlocation()
		 if(this.info==true){
		 	this.getinfo()
		 }
		},
		methods: {
			jumpurl(url){
				uni.navigateTo({
					url
				})
			},
			onShareAppMessage(res) {
				let path='/pages/hotel/jiudian';
				if(uni.getStorageSync('user_id')){
					path='/pages/hotel/jiudian?referee_id='+uni.getStorageSync('user_id');
				}
				return {
					title: '季忆水雲乡',
					path:path,
					// imageUrl:'../../static/person_img.png'
					
				}
			},
			onShareTimeline(res) {
				let path='/pages/hotel/jiudian';
				if(uni.getStorageSync('user_id')){
					path='/pages/hotel/jiudian?referee_id='+uni.getStorageSync('user_id');
				}
				return {
					title: '季忆水雲乡',
					path:path,
					// imageUrl:'../../static/person_img.png'
					
				}
			},
			// 获取首页轮播图图片：
			 getPic() {
				 let _this=this
			  const result = httpRequest.request('api/index/getAdvertiseList', 'POST', {
			    advertise_position_id: 1,
			    is_more: 1
			  }).then(res=>{
				  console.log(res.data)
				  if(res.code==1){
					  res.data.forEach(i => {
					    _this.swiperList.push(i.image_text)
					  })
				  }else{
					  httpRequest.toast(res.msg)
				  }
			  })
			},
			//跳转景区
			gojingqu(){
				uni.switchTab({
					url:'/pages/scenic/scenic'
				})
			},
			//跳转商城
			goshangcheng(){
				uni.switchTab({
					url:'/pages/shopping/shopping'
				})
			},
			gojifen(){
				let _this=this
				if (!httpRequest.checkIsLogin()) {
					 httpRequest.doLogin();
					  return false;
				}else{
					 this.info=true
					 console.log(_this.userinfo)
					 this.getinfo().then(()=>{
						 uni.navigateTo({
						 	url: `/pages/my/cent?cent=${this.userinfo.score?this.userinfo.score:'0'}`
						 })	
					 })
					 
				}
			},
			goyaoqing(){
				let _this=this
				if (!httpRequest.checkIsLogin()) {
				 httpRequest.doLogin();
				 return false;
				}else{
					this.info=true
					this.getinfo().then((res)=>{
						let date={
							avatar:_this.userinfo.avatar,
							nicheng:_this.userinfo.nickname,
							yaoqingma:_this.userinfo.invite_code,
							erweima:_this.userinfo.invitation_image_text
						}
						if(!_this.isgoyaoqing)return
						uni.navigateTo({
							url: '/pages/my/yaoqinghyou?msg=' + encodeURIComponent(JSON.stringify(date))
						})
					})
					
				}
			},
			getinfo(){
				return new Promise((resolve, rejec)=>{
					httpRequest.request('api/user/index', 'GET', {
					},false,false,true).then(res => {
						this.userinfo = res.data
						this.isgoyaoqing=true
						resolve()
					})
				})
				
			},
			// 小程序获取当前位置信息
			getlocation() {
				let _this = this
				uni.getLocation({
					type: 'gcj02',
					geocode: true,
					success: function(res) {
						//逆地址解析  坐标转地址信息
						_this.lat = res.latitude
						_this.lng = res.longitude
						_this.init()
						qqmapsdk.reverseGeocoder({
							//Object格式
							location: {
								latitude: res.latitude,
								longitude: res.longitude
							},
							success: function(res) { //成功后的回调
								const mapdata = res.result.address_component;
								_this.city_text = mapdata.city;//省地址
								_this.currentAddress = res.result.address//详细地址
							},
							fail: function(error) {
								console.error(error);
							},
							complete: function(res) {
								//console.log(res);
							}
						});

					}
				});

			},
			// 热门推荐列表
			init(isPage, page) {
				let _this = this;
				httpRequest.request('api/shop/index', 'GET', {
					page: page || 1,
					limit: _this.limit,
					lat: _this.lat,
					lng: _this.lng,
					is_hot: 1,
					keyword:_this.keyword
				}, false, false, true).then(res => {
					if (res.code == 1) {
						let resList = res.data;
						let dataList = _this.list;
						if (isPage == true) {
							_this.list.data = dataList.data.concat(resList.data);
						} else {
							this.list = res.data
							_this.list.data = resList.data;
						}
					}
				}).catch(err => {
					httpRequest.toast(err.msg);
				})
			},
			onReachBottom() {
				let _this = this;
				let list = _this.list;
				let page = _this.page;
				if (list.last_page <= page) {
					return false;
				}
				page++;
				_this.page = page;
				_this.init(true, page);
			},
			currentclick() {
				this.keyword = this.currentAddress
			},
			chaxun() {
				let date = {
					start:this.start,//年月日
					end:this.end,//年月日
					startime: this.startime, //开始时间
					endtime: this.endtime, //结束时间
					startweek: this.startweek, //开始周
					endweek: this.endweek, //结束周
					daynum: this.daynum,
					keyword:this.keyword
				}
				uni.navigateTo({
					url: '/pages/hotel/hotelist?msg=' + encodeURIComponent(JSON.stringify(date))
				})
			},
			// 酒店详情
			godetail(item){
				let date = {
					id:item.id,//酒店id
					start:this.start,//年月日
					end:this.end,//年月日
					startime: this.startime, //开始时间
					endtime: this.endtime, //结束时间
					startweek: this.startweek, //开始周
					endweek: this.endweek, //结束周
					daynum: this.daynum,
					juli:item.distance
				}
				uni.navigateTo({
					url:'/pages/hotel/jiudianxq?msg=' + encodeURIComponent(JSON.stringify(date))
				})
			},
			// 时间选择确定
			confirm(e) {
				let start = e[0]
				let end = e[e.length - 1]
				this.startime = Number(start[5] + start[6]) + "月" + Number(start[8] + start[9]) + "日"//月日赋值
				this.endtime = Number(end[5] + end[6]) + "月" + Number(end[8] + end[9]) + "日"//月日赋值
				this.start = start
				this.end = end
				this.startweek = this.weekchange(start)//计算周
				this.endweek = this.weekchange(end)//计算周
				this.daynum = this.DateDiff(start, end)//计算间隔天数
				this.show = false
			},
			// 日期初始化
			dateinit() {
				// 今天
				let start = this.date(new Date())
				let end = new Date()
				// 明天
				end.setTime(end.getTime()+24*60*60*1000);
				end = this.date(end)
				this.start = start
				this.end = end
				this.startime = Number(start[5] + start[6]) + "月" + Number(start[8] + start[9]) + "日"//月日赋值
				this.endtime = Number(end[5] + end[6]) + "月" + Number(end[8] + end[9]) + "日"//月日赋值
				this.startweek = this.weekchange(start)//计算周
				this.endweek = this.weekchange(end)//计算周
				this.daynum = this.DateDiff(start, end)//计算间隔天数
			},
			date(timer) {
				var date = new Date(timer); //当前时间
				var year = date.getFullYear() //返回指定日期的年份
				var month = repair(date.getMonth() + 1); //月
				var day = repair(date.getDate()); //日
				var curTime = year + "-" + month + "-" + day
				function repair(i) {
					if (i >= 0 && i <= 9) {
						return "0" + i;
					} else {
						return i;
					}
				}
				return curTime
			},
			// 周转换，此处地date是年月日
			weekchange(date) {
				let weekArrayList = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六', ]
				let index = new Date(date).getDay()
				let week = weekArrayList[index]
				return week
			},
			// 计算两个日期之间相差天数
			DateDiff(sDate1, sDate2) {
			 //sDate1和sDate2是2006-12-18格式
				var aDate1, aDate2, oDate1, oDate2, iDays;
				aDate1 = sDate1.split("-");
				oDate1 = new Date(aDate1[1] + '/' + aDate1[2] + '/' + aDate1[0]);
				aDate2 = sDate2.split("-");
				oDate2 = new Date(aDate2[1] + '/' + aDate2[2] + '/' + aDate2[0]);
				iDays = parseInt(Math.abs(oDate1 - oDate2) / 1000 / 60 / 60 / 24);
				return iDays
			}
		}
	}
</script>

<style scoped lang="scss">
	.margin_top{
		margin-top: 30rpx;
	}
	.margin_top1{
		margin-top: 10rpx;
	}
	.content {
		background-color: #fafafa;
		min-height: 100vh;
		padding: 30rpx;
	}
 .imageoutrr{
	 display: flex;
	 flex-direction: column;
	 align-items: center;
	 image{
		width: 92rpx;
		height: 92rpx;
		border-radius:50%;
	 }
	 .txt{
		 margin-top: 20rpx;
		 font-size: 26rpx;
		 font-family: PingFang SC-Medium, PingFang SC;
		 font-weight: 500;
		 color: #333333;
		 line-height: 30rpx;
	 }
 }
	.header {
		padding-top: 90rpx;
		display: flex;
		justify-content: center;

		.header_title {
			font-size: 32rpx;
			font-family: PingFang SC-Heavy, PingFang SC;
			font-weight: 800;
			color: #FFFFFF;
			line-height: 38rpx;
		}
	}
  .boxouter{
	  margin-top: 42rpx;
  }
	.img {
		width: 100%;
		height: 278rpx;
		background-size: 100% 100%;
		background-image: url('../../static/images/hotel/jiudiantop.png');
	}

	.middle {
		margin-top: 42rpx;
		box-sizing: border-box;
		padding: 30rpx;
		padding-top: 66rpx;
		padding-bottom: 30rpx;
		background-color: #FFFFFF;
		border-radius: 14rpx;
	}

	.mhleft {
		.address {
			display: flex;
			align-items: center;
			justify-items: center;

			.adresscontent {
				padding-left: 17rpx;
				font-size: 20rpx;
				white-space: nowrap;
				margin-right: 20rpx;
			}

			.adressimg {
				width: 21rpx;
				height: 26rpx;
			}
		}

		.sousuo {
			input {
				font-size: 28rpx;
				font-family: PingFang SC-Medium, PingFang SC;
				font-weight: 500;
				// color: #666666;
				line-height: 33rpx;
				height: 33rpx;
			}
		}
	}
	.dianxin {
		padding: 25rpx 28rpx 70rpx;
		width: 40%;
		background-size: 100% 100%;
		background-image: url('@/static/images/hotel/leftimg.png');
	}
	.sanshier{
		font-size: 32rpx;
		font-family: PingFang SC-Heavy, PingFang SC;
		font-weight: 800;
		color: #000000;
	}
	.dianxinz{
		padding: 25rpx 28rpx 70rpx;
		width: 40%;
		background-size: 100% 100%;
		background-image: url('@/static/images/hotel/rightimg.png');
	}
	.lansetext {
		font-size: 24rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #ED8778;
	}

	.mhright {
		.location {
			font-size: 24rpx;
			font-family: PingFang SC-Medium, PingFang SC;
			font-weight: 500;
			color: #00D2E1;
			line-height: 28rpx;
			padding-right: 4rpx;
		}

		.locationimg {
			width: 30rpx;
			height: 30rpx;
		}
	}

	.font {
		font-size: 34rpx;
		font-family: PingFang SC-Heavy, PingFang SC;
		font-weight: 800;
		color: #333333;
		line-height: 40rpx;
	}

	.middle_bottom {
		margin-top: 79rpx;

		.mb_left,
		.mb_right {
			display: flex;
			flex-direction: column;

			.ruzhu {
				font-size: 24rpx;
				font-family: PingFang SC-Medium, PingFang SC;
				font-weight: 500;
				color: #999999;
				line-height: 28rpx
			}
		}

		.yiwan {
			border-radius: 37rpx;
			border: 2rpx solid #999999;
			text-align: center;
			font-size: 24rpx;
			font-family: PingFang SC-Medium, PingFang SC;
			font-weight: 500;
			color: #999999;
			line-height: 28rpx;
			padding: 2rpx 25rpx;
		}
	}

	.riqi {
		margin-top: 6rpx;
		display: flex;
		align-items: flex-end;

		.ri {
			margin-right: 4rpx;
		}

		.qi {
			font-size: 24rpx;
			font-family: PingFang SC-Medium, PingFang SC;
			font-weight: 500;
			color: #333333;
			line-height: 28rpx;
		}
	}

	.searchbtn {
		margin-top: 80rpx;
		background: linear-gradient(339deg, #00D4E2 0%, #0CE0EF 100%);
		border-radius: 86rpx 86rpx 86rpx 86rpx;
		text-align: center;
		font-size: 32rpx;
		font-family: PingFang SC-Heavy, PingFang SC;
		font-weight: 800;
		color: #FFFFFF;
		line-height: 80rpx;
	}

	.remen {
		margin-top: 30rpx;
	}

	.rementitle {
		font-size: 32rpx;
		font-family: PingFang SC-Heavy, PingFang SC;
		font-weight: 800;
		color: #000000;
		line-height: 38rpx;
	}

	.jiudianlist {
		margin-top: 30rpx;
	}

	.left {
		// margin-right: 29rpx;
	}

	.right {
		width: 65%;
		display: flex;
		flex-direction: column;
		// padding-right: 30rpx;
		// box-sizing: border-box;

		.price {
			margin-top: 20rpx;
			font-size: 36rpx;
			font-family: PingFang SC-Heavy, PingFang SC;
			font-weight: 800;
			color: #FF5C00;
			line-height: 28rpx;
			flex: 1;
			text-align: right
		}
	}

	.section_img {
		width: 199rpx;
		height: 262rpx;
		background-size: 100% 100%;
		border-radius: 15rpx 15rpx 15rpx 15rpx;

	}

	.section {
		padding: 35rpx 29rpx 29rpx 29rpx;
		background-color: #fff;
		margin-top: 30rpx;
		border-radius: 18rpx 18rpx 18rpx 18rpx;
		position: relative;
		justify-content: space-between;
	}

	.right_ershou {
		font-size: 28rpx;
		font-family: PingFang SC-Heavy, PingFang SC;
		font-weight: 800;
		color: #000000;
		line-height: 33rpx;
	}

	.right_xuqui {
		left: 28rpx;
		bottom: 35rpx;
		padding: 3rpx 26rpx 1rpx 28rpx;
		font-size: 28rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #FFFFFF;
		background-color: rgba(243, 101, 32, 1);
		border-bottom-left-radius: 14rpx;
		border-top-right-radius: 14rpx;
	}


	.section_center {
		.tedian {
			margin-top: 20rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;

			.pingfen {
				font-size: 26rpx;
				font-family: PingFang SC-Heavy, PingFang SC;
				font-weight: 800;
				color: #FFFFFF;
				line-height: 30rpx;
				background-color: rgba(0, 210, 225, 1);
				padding: 4rpx;
				margin-right: 10rpx;
			}

			.miaoshu {
				width: 300rpx;
				font-size: 24rpx;
				font-family: PingFang SC-Medium, PingFang SC;
				font-weight: 500;
				color: #00D2E1;
				line-height: 28rpx;
				text-overflow: ellipsis;
				white-space: nowrap;
				overflow: hidden;
			}

			.pingnum {
				font-size: 24rpx;
				font-family: PingFang SC-Medium, PingFang SC;
				font-weight: 500;
				color: #666666;
				line-height: 28rpx;
				white-space: nowrap;

			}
		}
	}

	.juli {
		margin-top: 20rpx;
		font-size: 26rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #666666;
		line-height: 30rpx;
	}

	.telist {
		// width: 100%;
		overflow: hidden;
		margin-top: 20rpx;
		white-space: nowrap;

		.hotelte {
			display: inline-block;
			background-color: #F0F0F0;
			font-size: 22rpx;
			font-family: PingFang SC-Medium, PingFang SC;
			// font-weight: 500;
			color: #666;
			line-height: 26rpx;
			white-space: nowrap;
			padding:2rpx 10rpx;
			border-radius: 4rpx;
		}
	}
</style>
